<template>
    <div>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">销售申请详情 单号：{{orderInfo.sellerCarInApply.id}}</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="6">
                    供应商名称：<span>{{orderInfo.sellerCarInApply.sellerName}}</span>
                </el-col>
                <el-col :span="6">
                    手机号：<span>{{orderInfo.sellerCarInApply.sellerPhone}}</span>
                </el-col>
                <el-col :span="6">
                    授信银行：<span>{{orderInfo.creditAmount.bank}}</span>
                </el-col>
                <el-col :span="6">
                    授信利率：<span>{{orderInfo.creditAmount.rate}}%</span>
                </el-col>
                <el-col :span="6">
                    状态：<span v-if="orderInfo.sellerCarInApply.status != null">{{exportOrderState[orderInfo.sellerCarInApply.status].label}}</span>
                </el-col>
                <el-col :span="6">
                    保证金金额：<span>{{orderInfo.sellerCarInApply.deposit}}元</span> <strong style="color:#409EFF;cursor:pointer" @click="handleDepositDetails">明细</strong>
                </el-col>
            </el-row>
        </c-template>
        <!-- 车辆基本信息&手续 -->
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">车辆基本信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="24">
                    <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="orderInfo.carListDetails" v-loading="loading">
                        <el-table-column width="" label="车辆品牌" align="center" prop="brand" />
                        <el-table-column width="" label="车辆系列" align="center" prop="series" />
                        <el-table-column width="" label="车辆款式" align="center" prop="model" />
                        <el-table-column width="" label="单价（元）" align="center" prop="price" />
                        <el-table-column width="" label="车架号" align="center" prop="vin" />
                        <el-table-column width="" label="车辆手续" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.carFiles.length > 0">
                                    <div v-for="(item) in scope.row.carFiles" :key="item.id" @click="handleOpenFile(item.fileUrl)">
                                        <el-link type="primary" @click="handleOpenFile(item.fileUrl)">{{item.fileName}}</el-link>
                                    </div>
                                </div>
                                <div v-else>手续未上传</div>
                            </template>
                        </el-table-column>

                    </el-table>
                </el-col>
            </el-row>
        </c-template>
        <!-- 保证金 -->
        <c-template v-loading="loading" class="mb-lg tf-paragraph" v-if="orderInfo.sellerCarInApply.status > 4">
            <el-row :gutter="24" class="info-row">
                <el-col :span="18" class="detailsTitle mb-0">金额明细</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="24">
                    <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="orderInfo.sellerBill" v-loading="loading">
                        <el-table-column width="" label="费用名称" align="center">
                            <template slot-scope="scope">
                                {{scope.row.type == null ? "" : billStatus[scope.row.type].label}}
                            </template>
                        </el-table-column>
                        <el-table-column width="" label="金额（元）" align="center" prop="amount" />
                        <el-table-column width="" label="状态" align="center">
                            <template slot-scope="scope">
                                {{scope.row.status == null ? "" : payStatus[scope.row.status].label }}
                            </template>
                        </el-table-column>
                        <el-table-column width="" label="付款凭证" align="center">
                            <template slot-scope="scope">
                                <el-link type="primary" @click="handleOpenFile(scope.row.payProofUrl)" v-if="scope.row.payProofUrl" :underline="false">查看</el-link>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column width="" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-link type="primary" v-if="scope.row.status == 2" @click="handleApprove(6,orderInfo.sellerCarInApply.id,true)" :underline="false">确认</el-link>
                            </template>
                        </el-table-column> -->
                    </el-table>
                </el-col>
            </el-row>
        </c-template>
        <!-- 保函 -->

        <c-template v-loading="loading" class="mb-lg tf-paragraph" v-if="orderInfo.sellerCarInApply.status > 4">
            <el-row :gutter="24" class="info-row">
                <el-col :span="18" class="detailsTitle mb-0">保函</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" v-for="(item,index) in orderInfo.guaranteeList" :key="index">
                    <el-link type="primary" @click="handleOpenFile(item.url)">{{item.name}}</el-link>
                </el-col>
            </el-row>
        </c-template>

        <!-- 合同 -->
        <c-template v-loading="loading" class="mb-lg tf-paragraph" v-if="orderInfo.sellerCarInApply.status >= 2">
            <el-row :gutter="24" class="info-row">
                <el-col :span="18" class="detailsTitle mb-0">合同信息</el-col>
                <el-col :span="6" class="flex-x-end mb-0" v-if="orderInfo.sellerCarInApply.status == 2">
                    <c-upload class="mt-0" :showFileList="false" buttonName="上传合同模板" listType="text" ref="UploadContract" @change="onContractTemplateUpload" />
                    <c-upload class="mt-0 ml-lg" :showFileList="false" buttonName="上传正式合同" buttonType="primary" listType="text" ref="UploadContract" @change="onContractUpload" />
                    <!-- <el-button type="primary" @click="">上传正式合同</el-button> -->
                    <!-- <el-button type="default">上传模板合同</el-button> -->
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="24">
                    <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="orderInfo.contractList" v-loading="loading">
                        <el-table-column label="序号" width="80" align="center" type="index" />
                        <el-table-column width="" label="合同名称" align="center" prop="contractName">
                            <template slot-scope="scope">
                                <el-link type="primary" @click="handleOpenFile(scope.row.url)">{{scope.row.contractName}}</el-link> {{scope.row.type == 0?"（模板）":""}}
                            </template>
                        </el-table-column>
                        <el-table-column width="" label="合同编号" align="center" prop="contractNb" />
                        <el-table-column width="" label="状态" align="center">
                            <template slot-scope="scope">
                                {{scope.row.status==null ? "" : contractStatus[scope.row.status].label }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </c-template>
        <!-- 仓库 -->
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">仓库基本信息</el-col>

            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="6">
                    车辆入仓仓库：<span>{{orderInfo.sellerCarInApply.storeName}}</span>
                </el-col>
                <el-col :span="6">
                    联系人：<span>{{orderInfo.sellerCarInApply.sellerName}}</span>
                </el-col>
                <el-col :span="6">
                    联系方式：<span>{{orderInfo.sellerCarInApply.sellerPhone}}</span>
                </el-col>
            </el-row>
        </c-template>

        <!-- 保证金明细 -->
        <c-deposit-details ref="cDepositDetails" />
        <!-- 审批流 -->
        <c-template class="tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">审批意见</el-col>
            </el-row>
            <el-divider></el-divider>
            <c-approval-process :depositId="depositId" ref="approvalProcess" :bank="orderInfo.sellerCarInApply.bankName" :isView="isView" :id="id" @getInfo="getInfo" @isLoading="changeLoading" :status="orderInfo.sellerCarInApply.status"></c-approval-process>
        </c-template>

    </div>

</template>

<script>

import cApprovalProcess from './components/c-approval-process.vue';
import cDepositDetails from "./components/c-deposit-details.vue";
import { exportOrderState, contractStatus, billStatus, marginStatus } from "@/utils/status.js";
export default {
    components: {
        cDepositDetails,
        cApprovalProcess
    },
    data () {
        return {
            loading: false,
            tableData: [],
            orderInfo: {
                sellerCarInApply: {},
                creditAmount: {},
                carList: []
            },
            id: "",
            depositId: "",
            exportOrderState: exportOrderState,
            contractStatus: contractStatus,
            billStatus: billStatus,
            payStatus: marginStatus,
            isView: false
        };
    },
    mounted () {
        this.getInfo()
    },
    methods: {
        handleContractDelete (item) {
            this.$confirm("是否要删除此合同模板？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.loading = true;
                this.$post({
                    url: "/sellerContract/delete",
                    params: { id: item.id },
                }).then(() => {
                    this.$message.success("操作成功");
                    this.getInfo();
                });
            });
        },
        handleOpenFile (filePath) {
            if (filePath) {
                window.open(filePath);
            } else {
                this.$message.warning("服务器地址不存在");
            }
        },
        onContractUpload (item) {
            this.loading = true;
            this.$post({
                url: "/sellerContract/formal/upload/platform",
                data: {
                    files: item,
                    id: this.id,
                },
            }).then(() => {
                if (this.$refs.UploadContract) {
                    this.$refs.UploadContract.list = [];
                }
                this.getInfo();
            });
        },
        onContractTemplateUpload (item) {
            this.loading = true;
            this.$post({
                url: "/sellerContract/template/upload",
                data: {
                    files: item,
                    id: this.id,
                },
            }).then(() => {
                if (this.$refs.UploadContract) {
                    this.$refs.UploadContract.list = [];
                }
                this.getInfo();
            });
        },
        changeLoading (loading) {
            this.isView = true
            this.loading = loading
        },
        handleDepositDetails () {
            this.$refs.cDepositDetails.handleOpen(this.orderInfo.carListDetailsList);
        },
        async getInfo () {
            if (this.$route.query.id) {
                this.isView = eval(this.$route.query.isView)
                this.id = this.$route.query.id
                const params = {
                    id: this.$route.query.id,
                };
                this.loading = true;
                let res = await this.$get({ url: "/sellerCarInApply/getById", params })
                this.orderInfo = res
                res.sellerBill.forEach((item) => {
                    if (item.type == 0) {
                        this.depositId = item.id
                    }
                })
                this.loading = false;
                this.$refs.approvalProcess.getFlowsList()
            }
        },
    }
};
</script>